<template>
  <view>
    <!-- 头部搜索区域 -->
    <my-search></my-search>
    <view class="scroll-container">
      <!-- 左侧滑动区域 -->
      <scroll-view scroll-y="true" class="scroll-left" :style="{height:wh + 'px'}" >
        <block v-for="(i,index) in cateList" :key="i.cat_id">
          <view @click="onClick(index)" class="scroll-item" :class="['scroll-left',index === active ? 'active' :'']">{{i.cat_name}}</view>
        </block>
      </scroll-view>
      <!-- 右侧滑动区域 -->
      <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-right" :style="{height:wh + 'px'}"> 
        <view class="scroll-item" v-for="(item) in cateLevel2" :key="item.cat_id">
          <view view class="scroll-item-title" >
            /{{item.cat_name}}/
          </view>
          <view class="level3-container">
            <view class="level3-item" v-for=" i in item.children" :key="i.cat_id" @click="goGoodsList(i)">
              <view class="level3-title">
                 {{i.cat_name}}
              </view>
              <image :src="i.cat_icon"></image>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 分类泪飙数据
        cateList:[],
        // 当前设备可用的高度
        wh:0,
        // 默认分类激活项
        active:0,
        // 二级分类列表
        cateLevel2:[],
        // 滚动条距离顶部的距离
        scrollTop:0
      };
    },
    onLoad() {
      let winH = 0
       uni.getSystemInfo({
          success(res) {
            winH = res.windowHeight-60
          }
       })
      this.wh = winH
      this.getCateList() 
    },
    methods:{
     async getCateList(){
     const {data:res} =  await uni.$http.get('/api/public/v1/categories')
     if(res.meta.status !== 200) return uni.showMsg()
     this.cateList = res.message
     this.cateLevel2 = res.message[0].children
      },
      onClick(index){
        this.active = index
        this.cateLevel2 = this.cateList[index].children
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
      },
      goGoodsList(item){
        uni.navigateTo({
          url:'/subpkg/goods_list/goods_list?cid=' + item.cat_id
        })
      }
    }
  }
</script>

<style lang="scss">
.scroll-container{
  display: flex;
  .scroll-left{
    width: 120rpx;
    background-color: #f7f7f7;
    .scroll-item{
      text-align: center;
      line-height: 60px;
      font-size: 12px;
      position: relative;
      &.active{
        background-color: #ffffff;
        &::before{
          content: '';
          display: block;
          width: 2px;
          height: 30px;
          background-color: #C00000;
          position: absolute;
          left: 0;
          top: 50%;
          transform:translateY(-50%);
        }
      }
    }
  }
  .scroll-right{
    background-color: #fff;
    .scroll-item{
      .scroll-item-title{
        text-align: center;
        margin-bottom: 30rpx;
        margin-top: 30rpx;
        font-size: 12px;
        font-weight: 700;
      }
      .level3-container{
        display: flex;
        flex-wrap: wrap;
        .level3-item{
          width: 33.3%;
          font-size: 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .level3-title{
            font-size: 12px;
          }
          image{
            width: 150rpx;
            height: 150rpx;
          }
        }
      }
    }
   
  }
  
}

</style>
